<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
		<cu-custom bgColor="bg-top" :isBack="false">
			<block slot="content">分类</block>
		</cu-custom>
		<view class='base-padding mgt-30upx'>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 运维
				</view>
				<!-- <view class="action">
					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
				</view> -->
			</view>
				<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop>
						<radio-group class="block" @change="Gridchange">
							<view class="cu-list menu text-left">
								<view class="cu-item" v-for="(item,index) in 3" :key="index">
									<label class="flex justify-between align-center flex-sub">
										<view class="flex-sub">{{index +3}} 列</view>
										<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
									</label>
								</view>
							</view>
						</radio-group>
						<view class="cu-list menu text-left solid-top">
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">边框</text>
								</view>
								<view class="action">
									<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
								</view>
							</view>
						</view>
					</view>
				</view>
					<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
						<view class="cu-item" v-for="(item,index) in opList" :key="index" v-if="index<gridCol*2">
							<navigator :url="item.url">
								<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
									<view class="cu-tag badge" v-if="item.badge!=0">
										<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
									</view>
								</view>
								<text>{{item.name}}</text>
							</navigator>
						</view>
					</view>
			</view>
			<view class='base-padding mgt-30upx'>
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 流程
					</view>
					<!-- <view class="action">
						<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
					</view> -->
				</view>
					<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
						<view class="cu-dialog" @tap.stop>
							<radio-group class="block" @change="Gridchange">
								<view class="cu-list menu text-left">
									<view class="cu-item" v-for="(item,index) in 3" :key="index">
										<label class="flex justify-between align-center flex-sub">
											<view class="flex-sub">{{index +3}} 列</view>
											<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
										</label>
									</view>
								</view>
							</radio-group>
							<view class="cu-list menu text-left solid-top">
								<view class="cu-item">
									<view class="content">
										<text class="text-grey">边框</text>
									</view>
									<view class="action">
										<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
									</view>
								</view>
							</view>
						</view>
					</view>
						<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
							<view class="cu-item" v-for="(item,index) in oaList" :key="index" v-if="index<gridCol*2">
								<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
									<view class="cu-tag badge" v-if="item.badge!=0">
										<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
									</view>
								</view>
								<text>{{item.name}}</text>
							</view>
						</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../../utils/util.js'
	import api from '../../utils/api.js'
	import config from '../../config.js'
	import Json from '../../Json.js'
	
	export default {
		data() {
			return {
				categories: [],
				opList: [{
					cuIcon: 'global',
					color: 'red',
					badge: 0,
					name: '地图',
					url: 'siteMap/siteMap',
				}, {
					cuIcon: 'rankfill',
					color: 'orange',
					badge: 0,
					name: '数据监测',
					url: 'siteMonitor/siteMonitor'
				}, {
					cuIcon: 'formfill',
					color: 'yellow',
					badge: 0,
					name: '报表',
					url: ''
				}, {
					cuIcon: 'circlefill',
					color: 'yellow',
					badge: 0,
					name: '设备反控',
					url: 'ioc/companyMonitor'
				}, 
				],
				oaList:[],
				// oaList: [{
				// 	cuIcon: 'peoplefill',
				// 	color: 'red',
				// 	badge: 0,
				// 	name: '园区流程'
				// }, {
				// 	cuIcon: 'peoplefill',
				// 	color: 'orange',
				// 	badge: 0,
				// 	name: '运维流程'
				// }, {
				// 	cuIcon: 'peoplefill',
				// 	color: 'yellow',
				// 	badge: 0,
				// 	name: '企业流程'
				// }, 
				// ],
				modalName: null,
				gridCol: 3,
				gridBorder: true,
			}
		},
		onLoad() {
			util.loading()
			//先用测试数据开发界面
			this.categories = Json['cateList']
			uni.hideLoading()
			//应该用api调用后台接口
			// api.getCategories().then((categories) => {
			// 	if (config.debug) console.log('api.getCategories: ', categories);
			// 	this.categories = categories
			// }).catch((e) => {
			// 	console.log(e)
			// }).finally(function() {
			// 	uni.hideLoading()
			// })
		},
		methods:{
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
		}
	}
</script>

<style>
	.item {
		margin-bottom: 30upx;
	}

	.item>.row {
		border: 1px solid #efefef;
		border-radius: 6upx;
		box-sizing: border-box;
		padding: 15upx;
		padding-bottom: 6upx;
	}

	.item:nth-of-type(2n)>.row {
		margin-left: 15upx;
	}

	.item:nth-of-type(2n+1)>.row {
		margin-right: 15upx;
	}

	.img-responsive {
		border-radius: 6upx;
		border: 1px solid #efefef;
		max-width: 100upx;
		height: 100upx;
	}

	.img-responsive image {
		width: 100upx;
		height: 100upx;
	}

	.item>.row .col-8 {
		padding-left: 15upx;
		box-sizing: border-box;
	}

	.text-muted {
		margin-top: 10upx;
	}
	@media (min-width: 768px) {
		.img-responsive {
			border-radius: 5px;
			max-width: 80px;
			max-height: 80px;
		}
		
		.img-responsive image {
			max-width: 80px;
			max-height: 80px;
		}
	}
	.base-padding {
		box-sizing: border-box;
		padding: 0upx 30upx;
	}
</style>
